<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		#e02, #e022 {
			border: 1px solid #000000;
  			height: 200px;
 			width: 200px;
		}
		
	</style>
	<script type="text/javascript">
		
		
		// 页面加载事件：当整个html页面加载成功调用
		window.onload = function(){
			// 文本框事件
			var e01 = document.getElementById("e01");
			e01.onfocus = function(){
				html("textMsg","文本框获得焦点：focus");
			}
			e01.onblur = function(){
				html("textMsg","文本框失去焦点：blur");
			}
			e01.onkeydown = function(){
				html("textMsg","键盘按下：keydown；");
			}
			e01.onkeypress = function(event){
				var event = event || window.event;
				append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
			}
			e01.onkeyup = function(){
				append("textMsg","键盘弹起：keyup；");
			}
			
			// 鼠标事件
			var e02 = document.getElementById("e02");
			e02.onmouseover = function(){
				html("divMsg","鼠标移上：mouseover");
			}
			e02.onmouseout = function(){
				html("divMsg","鼠标移出：mouseout");
			}
			e02.onmousedown = function(){
				html("divMsg","鼠标按下：mousedown");
			}
			e02.onmouseup = function(){
				html("divMsg","鼠标弹起：mouseup");
			}
			
			var e022 = document.getElementById("e022");
			e022.onmousemove = function(event){
				var event = event || window.event;
				html("divMsg2","鼠标移动：mousemove , " + event.clientX + " -- " + event.clientY);
			};
			
			
			// 按钮事件
			var e03 = document.getElementById("e03");
			e03.onclick = function () {
				html("buttonMsg","单击：click");
			};
			e03.ondblclick= function () {
				html("buttonMsg","双击：dblclick");
			};
			
		};
		
		/**
		 * 指定位置显示指定信息
		 * @param objId ，元素的id属性值
		 * @param  text，需要显示文本信息
		 */
		function html(objId,text){
			document.getElementById(objId).innerHTML = text;
		}
		/**
		 * 指定位置追加指定信息
		 * @param objId ，元素的id属性值
		 * @param  text，需要显示文本信息
		 */
		function append(objId,text){
			document.getElementById(objId).innerHTML += text;
		}
		
	</script>
	
</head>
<body>
	<input id="e01" type="text" /><span id="textMsg"></span>
	<hr/>
	<div id="e02" ></div><span id="divMsg"></span>
	<hr/>
	<div id="e022" ></div><span id="divMsg2"></span>
	<hr/>
	<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
</body>
</html>